<template>
  <div class="aside">
    <el-aside width="170px">
      <el-menu
        router
        style="width:169px;height:100%;"
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-submenu
          v-for="(item, index) in navInfo[actIndex].children"
          :key="index"
          :index="actpath + '/' + item.menu_url"
        >
          <template slot="title">
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item
            v-for="(it, ind) in item.children"
            :key="ind"
            :index="actpath + '/' + it.menu_url"
            @click="savenavstate(actpath + '/' + item.menu_url)"
            >{{ it.title }}</el-menu-item
          >
        </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      leftData: [],
      actpath: sessionStorage.getItem("actpath"),
      navInfo: [],
      actIndex: sessionStorage.getItem("actIndex")
    };
  },
  created() {},
  mounted() {
    this.navInfo = this.$store.state.navInfo;
    console.log(this.$store.state.navInfo);
  },
  methods: {
    // 获取导航数据
    // async getNavInfo() {
    //   let { data: res } = await this.$axios.navInfo();
    //   console.log(res);
    //   if (res.code != 200) {
    //     this.$message.error(res.msg);
    //   } else {
    //     this.leftData = res.rows[1];
    //   }
    // },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 保存链接激活状态
    savenavstate(actpath) {
      console.log(actpath);
      // sessionStorage.setItem("actpath", actpath);
      this.actpath = actpath;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-aside {
  color: #333;
  width: 170px;
  height: 100%;
}
</style>
